<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    let cityArr = new Array(4);
    cityArr[0] = new Array("武汉", "黄冈", "宜昌", "襄阳");
    cityArr[1] = new Array("长沙", "株洲", "湘潭", "衡阳");
    cityArr[2] = new Array("广州", "深圳", "东莞", "佛山");
    cityArr[3] = new Array("南宁", "柳州", "桂林", "梧州");

    function selectCity(obj) {
        let cityIndex = obj.value;
        let arr = cityArr[cityIndex]
        let cityOption = "<option>==请选择城市==</option>>"
        for (let i = 0; i < arr.length; i++) {
            cityOption += "<option>" + arr[i] + "</option>";
        }
        document.getElementById("city").innerHTML = cityOption;
    }

</script>
<body>
<form>
    <select name="province" onchange="selectCity(this)">
        <option>--请选择省份--</option>
        <option value="0">湖北</option>
        <option value="1">湖南</option>
        <option value="2">广东</option>
        <option value="3">广西</option>
    </select>省
    <select id="city">
        <option>--请选择城市--</option>
    </select>市
</form>
</body>
</html>